<template>
  <div class="component-label">创意资源</div>
  <div class="flex media-group creative-media-group-component">
    <div v-for="(media, i) in component.medias" class="flex-1 media-item">
      <UploadComponet :accept="`${creativor.way}/*`" @finish="(v) => onFinish(v, media)" @progress="onProgress"
        @before-upload="onBefore" @remove="(v) => removeMeida(v, media)" :params="uploadParams" :rules="getRule(media)"
        :value="media"></UploadComponet>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';
import { useStore } from '@/store';
import UploadComponet from './upload.vue';
// media Update Code ok
import MediaGroupComponent from '@/store/modules/adv/component/media/group';
const store = useStore();
const creativor = computed(() => store.state.adv.modal.creativor);
const emit = defineEmits(['before-upload', 'finish', 'error', 'progress', 'controlUpdate']);
const account = computed(() => {
  const accounts = store.state.adv.accounts;
  return accounts[0];
})

const props = withDefaults(
  defineProps<{
    component: MediaGroupComponent
    params: any,
  }>(), {}
)

const uploadParams = computed(() => {
  return {
    action: `/api/adgroup/${creativor.value.way}/upload`,
    accept: creativor.value.way + '/*',
    data: {
      accountCode: account.value ? account.value.accountCode : undefined,
      adcreativeTemplateId: creativor.value.creativeTemplateId
    }
  }
});

function getRestriction(restriction: any) {
  // const { video_restriction, image_restriction } = restriction || {};
  return restriction

}
function getRule(media: any) {
  const rules = getRestriction(media.media_restriction || {});
  return {
    file_format: rules.file_format || [],
    duration: rules.min_duration || rules.max_duration ? [rules.min_duration, rules.max_duration] : [],
    rect: [rules.min_width || rules.width || 500, rules.min_height || rules.height || 500],
    suggest: rules.width || rules.height ? [rules.width, rules.height] : [],
    size: rules.file_size || (512000),
    ratio: rules.ratio_width ? [rules.ratio_width, rules.ratio_height] : []
  };

}


function onFinish(e: any, media: any) {
  media.media_url = e.media_url;
  media.meta_type = e.meta_type;
  media.media_id = e.mediaId;
  // media.init(e);
  media.keyFrameImageUrl = e.keyFrameImageUrl;
  media.fileSize = e.fileSize;
  media.mediaHeight = e.mediaHeight;
  media.mediaName = e.mediaName;
  media.mediaWidth = e.mediaWidth;
  media.mediaType = e.mediaType;
  media.mediaSignature = e.mediaSignature;
  media.videoMillisecond = e.videoMillisecond;
  media.accountCode = account.value ? account.value.accountCode : undefined;
  emit('finish', e);
  emit('controlUpdate', media)
}

function onBefore(e: any) {
  emit('before-upload', e)
}


function onError(e: any) {
  emit('error', e)
}


function onProgress(e: any) {
  // load.value = false;
  emit('progress', e)
}
function removeMeida(e: any, media: any) {
  media.media_url = ''
  media.meta_type = ''
  media.media_id = ''
  media.keyFrameImageUrl = '';
  media.accountCode = undefined;
  emit('controlUpdate', media)

}







</script>
<style lang="scss" scoped>
.component-label {
  line-height: 22px;
  color: rgba(38, 38, 41, 0.72);
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
<style lang="scss">
.creative-media-group-component {
  border: 1px solid #e6e8ed;
  border-radius: 4px;
  width: 100%;
  white-space: nowrap;
  flex-wrap: wrap;

  .media-item:first-child {
    flex-grow: 1;
  }
  .media-item {
    // width: 50%;
    flex: 1 1 0%;
    .media-component-container {
      border: none;
      border-radius: none;
    }
  }
}
</style>
